<template>
  <div class="statistics-content statistics-8">
    <div class="grid-top">
      <div class="grid grid-left">
        <div class="statistics-block">
          <BlockItem class="max" title="报名⼈数占⽐"></BlockItem>
          <div class="chart" id="chart1"></div>
        </div>
      </div>
      <div class="grid grid-center">
        <div class="map-block" style="position: relative">
          <div class="number-block" style="position: relative;z-index: 1">
            <div class="number-item" v-for="(item,index) in list" :key="index">
              <div class="count-item">
                <div class="count FZHZGBJ">{{item.value}}</div>
                <div class="txt" v-if="item.id==1">人</div>
                <div class="txt" v-else>个</div>
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </div>
          <div id="map"></div>
        </div>
      </div>
      <div class="grid grid-right">
        <div class="statistics-block">
          <BlockItem class="max" title="意向参加培训的人员"></BlockItem>
          <div class="chart" id="chart2"></div>
        </div>
      </div>
    </div>
    <div class="grid-bottom">
      <div class="grid grid-bot">
        <div class="statistics-block">
          <BlockItem class="max" title="意向参加培训的课程"></BlockItem>
          <div class="chart" id="chart3"></div>
        </div>
        <div class="statistics-block">
          <BlockItem class="max" title="取得证书人数"></BlockItem>
          <div class="chart" id="chart4"></div>
        </div>
      </div>
    </div>
    <Modal v-if="showMore" @closeModal="showMore=false" :title="title" :name="this.name" width="1200px" height="400px">
      <MapCount2 :title="title" :detail="detail" :type="type"></MapCount2>
    </Modal>
  </div>
</template>

<script>
import {getNum} from "@/utils/utils";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import {getTotalApi, getTrainApi, getTranMap} from "@/api/statistics-8";
import Modal from "@/components/Modal/Modal";
import MapCount2 from "@/components/MapCount/MapCount2";
import Cover3 from "@/components/Cover/Cover3.vue";
export default {
  name: "Statistics8",
  components: {BlockItem,MapCount2,Modal,Cover3},
  data(){
    return{
      fairActive:1,
      fatherId: 0,
      title:'',
      moreType:1,
      showMore:false,
      list:[{id:1,name:'报名人数',value:360},{id:2,name:'培训机构数',value:45},{id:3,name:'培训专业数',value:52},{id:4,name:'工种数',value:869}],
      type:1,
      detail:{}
    }
  },
  methods: {
    getTrain(){
      getTotalApi().then((res)=>{
        if(res.code===200){
          this.list=res.data
        }
      })
    },
    getMapDetail(){
      getTranMap({type:this.type}).then((res)=>{
        if(res.code===200){
          this.detail=res.data
        }
      })
    },
    initChart1() {
      let myCharts = this.$echarts.init(document.getElementById('chart1'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#2391FF','#8165A3', '#EC8883','#5AD8A6','#FFC328','#0BA165','#FF800D'],
        legend: {
          left: 'center',
          bottom: 65,
          itemWidth: 12,
          itemHeight: 12,
          itemGap:35,
          textStyle: {
            color: "#fff",
            fontSize:15,
          },
        },
        series: [
          {
            type: 'pie',
            radius: '45%',
            center: ['50%', '30%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 350, name: '安定区 350人' },
              { value: 10, name: '其他 10人' },
            ]
          }
        ]
      };
      // getTrainApi().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data;
      //     myCharts.hideLoading()
      //     myCharts.setOption(option);
      //   }
      // })
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/adq_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          // visualMap: {
          //   left: 'right',
          //   top: 'bottom',
          //   max:1000,
          //   inRange: {
          //     color: [
          //       'rgba(17,74,112,0.2)',
          //       '#46a9ff',
          //     ]
          //   },
          //   textStyle: {
          //     color: "#fff"
          //   },
          //   calculable: true
          // },
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center:[104.62577,35.682264],
              zoom:1.2,
              type:'map',
              // data:[
              //   {name: '肃州区', value: getNum(1,10000,8000)[0]},
              //   {name: '玉门市', value: getNum(1,9000,8000)[0]},
              //   {name: '金塔县', value: getNum(1,8000,7000)[0]},
              //   {name: '瓜州县', value: getNum(1,9000,8000)[0]},
              //   {name: '敦煌市', value: getNum(1,9000,8000)[0]},
              //   {name: '阿克塞县', value: getNum(1,6000,4000)[0]},
              //   {name: '肃北县', value: getNum(1,6000,4000)[0]},
              // ],
              data:[
                // {name: '肃州区', value: 837},
                // {name: '玉门市', value: 189},
                // {name: '金塔县', value: 21},
                // {name: '瓜州县', value: 264},
                // {name: '敦煌市', value: 51},
                // {name: '阿克塞县', value: 15},
                // {name: '肃北县', value: 6},
              ],
              label: {
                show: true,
                fontSize: "14",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.on('click',(e)=>{
          if(e.componentSubType=='map'){
            this.title=e.data.name
            this.moreType=2;
            this.showMore=true;
          }
        })
        myCharts.setOption(option)
      })
    },
    initChart2(){
      let charts = this.$echarts.init(document.getElementById('chart2'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        title: {
          // text: '各县市未就业人数分布',
          left:'center',
          top:0,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:10
        },
        grid:{
          top:0,
          left:90,
          right:30,
          bottom:80
        },
        xAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: ['企业职工','农村转移劳动力','两后生','失业人员','退役军人','残疾人','高校毕业生','脱贫劳动力'],
          axisLabel: {
            interval:0,
            //rotate:50,
            textStyle: {
              color: '#fff',
              fontSize: '14',
            },
            formatter: function (value) {
              var ret = '';
              var maxLength = 5;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          },
          axisTick:{
            show:false
          }
        },
        series: [
          {
            //name:'人数',
            data: [42, 654, 527, 42, 52, 400, 575, 348, 24, 43, 421],
            type: 'bar',
            barWidth:13,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(17, 49, 119)',
              borderRadius:50
            },
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'right',
                  textStyle:{
                    color:'#fff',
                    fontSize:13
                  },
                },
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
                  offset:0,
                  color:'#01D0F5'
                },{
                  offset:1,
                  color:'#2196FE'
                }])
              }
            }
          }
        ]
      }
      option.yAxis.data=option.yAxis.data.reverse();
      option.series[0].data=option.series[0].data.reverse();
      charts.hideLoading();
      charts.setOption(option)
    },
    initChart3(){
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          top:30,
          left:60,
          right:10,
          bottom:50
        },
        legend: {
          right:10,
          top:0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle:{
            color:'#fff'
          }
        },
        xAxis: {
          data: ['创业培训','计算机应用','电工','无人机驾驶员','架子工','美容美发师','电子商务师','育婴员','养老护理员','家政服务员','中式烹调'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 4;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },

        yAxis: {
          name: '单位：人',
          min:0,
          nameTextStyle:{
            color:'#fff',
            fontSize:14
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          type: 'bar',
          data: [134, 242, 245, 365, 456, 735, 435, 354, 4, 42, 654, 527, 42, 52, 400, 575, 348, 24, 43, 421],
          label: {
            show: true,
            position: 'top',
            color:'#fff'
          },
          barWidth: 10,
          barCategoryGap: '30%',
          barGap:'30%',
          itemStyle: {
            normal: {
              barBorderRadius:[15, 15, 15, 15],
              color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                offset:0,
                color:'#2196FE'
              },{
                offset:1,
                color:'#03CEF6'
              }])
            }
          }
        }
        ]
      };
      myCharts.hideLoading();
      myCharts.setOption(option)
    },
    initChart4(){
      let myCharts = this.$echarts.init(document.getElementById('chart4'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          top:30,
          left:60,
          right:10,
          bottom:60
        },
        legend: {
          right:10,
          top:0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle:{
            color:'#fff'
          }
        },
        xAxis: {
          data: ['职业资格证书','职业技能等级证书','专项职业能力证书','特种作业操作证书','特种设备作业证书','培训合格证书及其他证书'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 4;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },

        yAxis: {
          name: '单位：人',
          nameTextStyle:{
            color:'#fff',
            fontSize:14
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          type: 'bar',
          data: [735, 435, 354, 4, 42, 654, 527, 42, 52, 400, ],
          label: {
            show: true,
            position: 'top',
            color:'#fff'
          },
          barWidth: 10,
          barCategoryGap: '30%',
          barGap:'30%',
          itemStyle: {
            normal: {
              barBorderRadius:[15, 15, 15, 15],
              color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                offset:0,
                color:'#2196FE'
              },{
                offset:1,
                color:'#03CEF6'
              }])
            }
          }
        }
        ]
      };
      myCharts.hideLoading();
      myCharts.setOption(option)
    }
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    //this.getTrain()
    // this.getMapDetail()
    this.initChart1();
    this.initMap();
    this.initChart2()
    this.initChart3()
    this.initChart4()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 2px solid #05548A;
.statistics-content.statistics-8{
  display: flex;
  flex-direction: column;
  height: calc(100% - 160px);
  padding:0 10px;
}
.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 140px);


  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    //box-shadow: $boxshadow;
    border-radius: 10px;
    background: #0A1456;
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;
  .grid-top{
    height: calc(100%/3*2);
    width: 100%;
    display: flex;
  }
  .grid-bottom{
    height: calc(100%/3);
    margin-top: 20px;
    .chart{
      width: 100%;
       height: calc(100%- 30px);
    }
  }
  .grid.grid-bot{
    width: 100%;
    display: flex;

    .statistics-block{
      width: calc((100%- 20px)/2);
      //width: 100%;
      margin-right: 20px;
      height: 100%;
      padding: 20px;
      .chart{
        width: 100%;
       // height: calc(100%- 120px);
      }
    }
    .statistics-block:last-child{
      margin-right: 0;
    }
  }
  .grid {
    height: 100%;
  }
  .grid.grid-left{
    width: calc(100%/3);
    .statistics-block{
      width: 100%;
      height: 100%;
      padding: 20px;
      .structure{
        height: 100%;
        .gender{
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .gender-item{
            width: calc(50% - 10px);
            height: 100%;
            display: flex;
            align-items: center;
            img{
              width: 80px;
              height: 100%;
            }
            .gender-info{
              width: calc(100% - 100px);
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-left: 20px;
              div{
                color: #fff;
              }
              .number{
                font-size: 28px;
                margin-top: 15px;
                .unit{
                  color: #fff;
                  font-size: 14px;
                  font-family: "Microsoft YaHei";
                }
              }
            }
          }
        }
        .progress{
          width: 100%;
          height: calc(100% - 10px);
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
  }
  .grid.grid-right {
    width: calc(100%/3);
    .statistics-block{
      width: 100%;
      height: 100%;
      margin-bottom: 20px;
      .chart{
        width: 100%;
        height: 100%;
      }
      .circle-block{
        display: flex;
        width: 100%;
        height: calc(100% - 50px);
        justify-content: center;
        align-items: center;
        .circle-list{
          position: relative;
          text-align: center;
          width: 100%;
          margin: auto;
          .textCenter {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .text {
              font-size: 22px;
              color: #50FFC1;
              margin-bottom: 5px;
              display: flex;
              align-items: center;
              .txt{
                font-size: 18px;
                color: #ffffff;
              }
            }
            span {
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .grid.grid-center{
    width: calc(100%/2);
    padding:0 20px;
  }
  .statistics-block{
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
  .statistics-block:last-child{
    margin-bottom: 0;
  }
  .map-block{
    width: 100%;
    //height: calc(100%/3*2);
    height: 100%;
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .count-item{
          display: flex;
          align-items: center;
          .count{
            color: #ffffff;
            font-size: 30px;
            font-weight: bold;
          }
          .txt{
            color: #ffffff;
          }
        }
        .name{
          color: #ffffff;
          font-size: 14px;
          margin-top: 5px;
        }
      }
      .number-item:nth-child(1n){
        background-image: linear-gradient( #514FDC,#4628C9);

      }
      .number-item:nth-child(2n){
        background-image: linear-gradient( #2094E3,#187FCD);
        opacity:0.9;
      }
      .number-item:nth-child(3n){
        background-image: linear-gradient( #21C6AB,#10A3D3);
        opacity:0.9;
      }
      .number-item:last-child{
        background-image: linear-gradient( #CC9F5B,#CC727F);
        margin-right: 0;
      }
    }
  }
}
</style>
